import React from 'react';
import {inject, observer} from 'mobx-react';
import { withRouter, Route } from 'react-router-dom';
import {RouteLayout} from 'weaver-mobile-page';
import Add from './Add';
import Doc from '../doc/';
import QueueAnim from 'rc-queue-anim';
import DocConstant from '../../util/';

@withRouter
class DocRoute extends React.Component {
  componentWillUnmount() {
    if (DocConstant.isApp()) {
      window.em.closeWindow();
    } else {
      this.props.history.goForward();
    }
  }
  render() {
    const {scope} = this.props;
    return (
      <Doc path={`/add/${scope}`}/>
    );
  }
}
/**
 * 新增文档
 */
@inject('docFormStore')
@withRouter
@observer
export default class DocForm extends React.Component {
  componentDidMount() {
    const {docFormStore, match, history} = this.props, scope = match.params.scope;
    docFormStore.init(scope, history);
  }
  render() {
    const {docFormStore, match} = this.props, {addStore} = docFormStore, scope = match.params.scope;
    if (!addStore) return null;
    return (
      <div>
        <Add.Component store={addStore}/>
        <Route
          key="add-doc"
          path="/add/:scope/doc/:id"
          render={() => {
            return (
              <QueueAnim>
                <RouteLayout key="add-doc-div">
                  <div className="wm-route-layout">
                    <DocRoute scope={scope}/>
                  </div>
                </RouteLayout>
              </QueueAnim>
            );
          }}
        />
      </div>
    );
  }
}